*{
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

html{
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
}
body{
    -webkit-touch-callout: none;   
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;   
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: black;
    overflow: hidden;
    cursor: default;
}
#bg{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(images/lry.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: blur(3.125vh) brightness(0.5);
    -webkit-filter: blur(3.125vh) brightness(0.5);
}
main{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
}
header{
    font-size: 2.96875vh;
    text-align: center;
    height: 6.875vh;
    line-height: 6.875vh;
}
h2{
    text-align: center;
    font-size: 2.34375vh;
    font-weight: normal;
    margin: 0;
    color: #ccc;
}
#cover{
    width: 49.375vh;
    height: 49.375vh;
    max-width: 49.375vh;
    max-height: 49.375vh;
    overflow: hidden;
    margin: 4.6875vh auto 0 auto;
}
section{
    position: absolute;
    z-index: 10;
    width: 46.875vh;
    height: 46.875vh;
    background-image: url(images/lry.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border: 1.25vh solid #222;
    animation: rotate 20s linear infinite;
}
#lrc{
    color: #b3b3b3;
    font-size: 2.03125vh;
    text-align: center;
    margin-top: 2.34375vh;
}
input[type=range]{
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
}
input[type=range]::-moz-range-thumb{
    width: 2.34375vh;
    height: 2.34375vh;
    background: #31c27c;
    border-radius: 50%;
    border: 0.15625vh solid #31c27c;
}
input[type=range]::-moz-range-track{
    height: 0.3125vh;
    background: #31c27c;
}
input[type=range]::-webkit-slider-runnable-track{
    height: 0.3125vh;
    background: #31c27c;
    margin: 0 0.78125vh;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;   
    width: 2.34375vh;
    height: 2.34375vh;
    margin-top: -0.9375vh;
    background: #31c27c;
    border-radius: 50%;
    border: 0.15625vh solid #31c27c;
}
#time>span{
    color: #afafb0;
    font-size: 2.03125vh;
}
#time{
    display: flex;
    align-items: center;
    padding: 3.90625vh 2.34375vh;
}
#time>input{
    flex-grow: 1;
}
#buttons{
    display: flex;
    align-items: center;
    justify-content: center;
}
#buttons>img{
    width: 6.40625vh;
    height: 6.40625vh;
}
#buttons>img:nth-child(2){
    width: 10.15625vh;
    height: 10.15625vh;
    margin: 0 6.25vh;
}
#volume>i{
    color: #61a67c;
}
#volume{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3.90625vh;
}
#volume>input[type=range]::-moz-range-thumb{
    width: 1.71875vh;
    height: 1.71875vh;
    background: #61a67c;
    border-radius: 50%;
    border: 0.15625vh solid #61a67c;
}
#volume>input[type=range]::-moz-range-track{
    height: 0.3125vh;
    background: #61a67c;
}
#volume>input[type=range]::-webkit-slider-thumb{
    width: 1.71875vh;
    height: 1.71875vh;
    margin-top: -0.653125vh;
    background: #61a67c;
    border-radius: 50%;
    border: 0.15625vh solid #61a67c;
}
#volume>input[type=range]::-webkit-slider-runnable-track{
    height: 0.3125vh;
    background: #61a67c;
    margin: 0 0.625vh;
}
#box{
    height: 62.5vh;
    position: relative;
}
#boxA{
    width: 100vw;
    position: absolute;
}
#boxB{
    width: 100vw;
    position: absolute;
    padding-top: 1.5625vh;
}
#boxB>p{
    font-size: 2.34375vh;
    text-align: center;
    margin: 0;
    height: 5.625vh;
    line-height: 5.625vh;
}

#boxB>p:nth-child(1),#boxB>p:nth-child(11){
    opacity: 0.2
}
#boxB>p:nth-child(2),#boxB>p:nth-child(10){
    opacity: 0.4
}
#boxB>p:nth-child(3),#boxB>p:nth-child(9){
    opacity: 0.6
}
#boxB>p:nth-child(4),#boxB>p:nth-child(8){
    opacity: 0.9
}
#boxB>p:nth-child(5),#boxB>p:nth-child(7){
    opacity: 1
}
#boxB>p:nth-child(6){
    color: #31c27c;
}

aside{
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 62.5vh;
    background-color: rgba(0,0,0, 0.9);
    color: white;
    z-index: 100;
}
aside>header{
    font-size: 2.34375vh;
    height: 7.8125vh;
    line-height: 7.8125vh;
    text-align: left;
    padding: 0 3.125vh;
    border-bottom: 0.15625vh solid #544;
}
aside>footer{
    font-size: 2.34375vh;
    height: 7.8125vh;
    width: 100vw;
    line-height: 7.8125vh;
    text-align: center;
    border-top: 0.15625vh solid #544; 
    position: absolute;
    bottom: 0;   
}
aside>ul{
    margin: 0;
    height: 45.3125vh;
    padding-left: 3.125vh;
    list-style-type: none;
}
aside li{
    height: 7.03125vh;
    line-height: 7.03125vh;
    border-bottom: 0.15625vh solid #322;
}
aside small{
    color: #375;
}

@keyframes rotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes out {
    0%{
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100%{
        opacity: 0;
        transform: translate(0,-78.125vh) scale(0.9);
    }
}

@keyframes fadeOut {
    0%{
        opacity: 1;
        display: block;
    }
    100%{
        opacity: 0;
        display: none;
    }
}

@keyframes fadeIn {
    0%{
        opacity: 0;
        display: none;
    }
    100%{
        opacity: 1;
        display: block;
    }
}

@keyframes slideUp{
    0%{
        bottom: -62.5vh;
        display: none;
    }
    100%{
        bottom: 0;
        display: block;
    }
}
@keyframes slideDown{
    0%{
        bottom: 0;
        display: block;
    }
    100%{
        bottom: -62.5vh;
        display: none;
    }
}
